<template>
  <view class="home">
    <view class="comPopWrapHd">
      <view class="title">首页</view>
    </view>

    <view class="bd">
      <template v-if="userList.length > 0">
        <view class="row" v-for="item in userList" :key="item.id">
          <view class="avatar">
            <img :src="item.userInfo.avatar" />
            <view class="nickname">
              {{ item.notes  }}
              <view class="f20">({{ item.relationship == 1 ? '子女' : item.relationship == 2 ? '配偶' : '亲戚' }})</view>
            </view>
          </view>
          <view class="call">
            <img class="icon" src="http://eldertab-static.hpaiapp.com/images/video.png" />
            <img class="icon" src="http://eldertab-static.hpaiapp.com/images/voice.png" />
          </view>
          <view class="btn">
            <!-- <u-button type="primary" shape="circle" :custom-style="customStyle" @click="fUserUnbind(item.userId)">解除</u-button>
            <u-button type="primary" shape="circle" :custom-style="customStyle" @click="fFixUser(item)">修改</u-button> -->

            <view class="btnFix" @click="fUserUnbind(item.userId)">解除</view>
            <view class="btnFix" @click="fFixUser(item)">修改</view>
          </view>
        </view>
      </template>
      <view class="noData" v-else>
        暂无数据
      </view>
    </view>

    <view class="ft">
      <u-button type="primary" icon="plus" shape="circle" :custom-style="customStyleAdd" @click="fAddUser">
        <u-icon name="plus"></u-icon><br/>
        添加</u-button>
    </view>

    <dialog-user-bind
      :showPop="showPop"
      v-if="showPop"
      :edit="edit"
      :userData="userData"
      @save="fUserList"
      @close="showPop = false">
    </dialog-user-bind>
  </view>
</template>

<script>
import { userList, userUnbind } from "@/api"
import DialogUserBind from "./components/DialogUserBind"

export default {
  name: "Home",
  components: {
    DialogUserBind
  },
  data() {
    return {
      showPop: false,
      userList: [],
      edit: false,
      userData: {},
      customStyle: {
        height: '60rpx',
				color: '#E04A13',
        background: '#FFF3ED',
        display: 'inline-block',
        marginLeft: '10rpx',
        lineHight: '60rpx !important'
			},
      customStyleAdd: {
        width: '144rpx',
        height: '144rpx'
			}
    }
  },
  onLoad(option) {

  },
  onShow() {
    this.fUserList()
  },
  onShareAppMessage(){},
  onShareTimeline(){},
  methods: {
    fUserList(){
      userList().then(res => {
        this.userList = res.data
      })
    },
    fFixUser(user){
      this.userData = user
      this.showPop = true
      this.edit = true
    },
    fAddUser(){
      this.showPop = true
      this.edit = false
    },
    fUserUnbind(userId){
      let _this = this
      uni.showModal({
        content: "请确认是否解除绑定？",
        success: function(res) {
          if(res.confirm) {  
            userUnbind({ userId }).then(res => {
              if(res.code === 0){
                uni.showToast({
                  title: '操作成功',
                  icon: 'success',
                  duration: 3000
                })
                _this.fUserList()
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.home{
  .comPopWrapHd{
    margin-bottom: 92rpx;
    background-color: #fff;

    .title{
      padding-bottom: 20rpx;
    }
  }

  .bd{
    padding: 0 28rpx;

    .noData{
      text-align: center;
      padding: 100rpx;
      font-size: 26rpx;
      color: #AEAEAE;
    }
    .row{
      display: flex;
      margin-top: 20rpx;
      background: #fff;
      border-radius: 16rpx;
      padding: 32rpx 38rpx;
      text-align: center;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0rpx 0rpx 15rpx 1rpx rgba(0,0,0,0.05);

      .avatar img{
        width: 88rpx;
        height: 88rpx;
        text-align: center;
        background: #d1d1d1;
        border-radius: 88rpx;
        margin: 0 auto;
      }

      .nickname{
        padding-top: 15rpx;
        text-align: center;

        .f20{
          font-size: 20rpx;
          // padding-left: 8rpx;
        }
      }

      .call{
        margin-left: 35rpx;
      }

      .icon{
        width: 64rpx;
        height: 64rpx;
        border-radius: 64rpx;
        display: inline-block;
        margin: 0 15rpx;
        background-color: green;
      }
    }
  }
  
  .ft{
    position: fixed;
    bottom: 30rpx;
    left: 45%;
  }
}

.btnFix{
  width: 120rpx;
  height: 60rpx;
  color: #E04A13;
  background: #FFF3ED;
  display: inline-block;
  margin-left: 10rpx;
  border-radius: 60rpx;
  line-height: 60rpx;
}
</style>
